<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿磊的复利计算</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
        html {
            overflow-x:auto;
            overflow-y:scroll;
        }
        body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
            font-weight:400;
            margin:0;
            padding:0;
        }
        h1, h2, h3, h4, h4, h5 {
            margin:0;
            padding:0;
        }
        body {
            background-color:#FFFFFF;
            color:black;
            font-family:Helvetica,Arial,sans-serif;
            font-size:12px;
            padding:0 0px;
            text-align:left;
        }
        select {
            font-size:12px;
        }
        table {
            border-collapse:collapse;
        }
        fieldset, img {
            border:0 none;
        }
        fieldset {
            margin:0;
            padding:0;
        }
        fieldset p {
            margin:0;
            padding:0 0 0 8px;
        }
        legend {
            display:none;
        }
        address, caption, em, strong, th, i {
            font-style:normal;
            font-weight:400;
        }
        table caption {
            margin-left:-1px;
        }
        hr {
            border-bottom:1px solid #FFFFFF;
            border-top:1px solid #E4E4E4;
            border-width:1px 0;
            clear:both;
            height:2px;
            margin:5px 0;
            overflow:hidden;
        }
        ol, ul {
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
        }
        caption, th {
            text-align:left;
        }
        q:before, q:after, blockquote:before, blockquote:after {
            content:"";
        }
    </style>
</head>
<body>

<div id="app" style="background-color: #E4E4E4;height: 1100px">
    <div style="width: 100%;text-align: center;padding-top: 30px;padding-bottom: 30px"><h2>阿磊的复利计算器</h2></div>

    <div style="height: 400px;width:300px;background-color: #44321a;border-radius: 30px;margin: 0 auto;padding-top: 20px;padding-left: 20px">
        <div style="width: 280px;height: 380px;background-color: rgb(177, 215, 226);">
            <div style="padding-top: 20px">
                <el-row>
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="6"><div style="padding-top: 5px;color: black">计算类型：</div></el-col>
                    <el-col :span="17">
                        <el-select v-model="computeType" placeholder="请选择" size="mini" style="width: 190px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>

                <div v-if="computeType==1" >
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">存入金钱：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute1.principal" size="mini" style="width: 190px"></el-input></el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">存入期数：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute1.times" size="mini" style="width: 190px"></el-input></el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">每期利息：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute1.interest" size="mini" style="width: 90%"></el-input>%</el-col>
                    </el-row>

                    <div style="margin-top: 10px;width: 100%;text-align: center" >
                        <el-button type="info" round size="mini" @click="compute()">计算</el-button>
                    </div>

                    <div style="margin-top: 30px;text-align: center;">本利结果</div>

                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">本金和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute1.principalSum}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">利息和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute1.interestSum}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">本息和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute1.totalSum}}</el-col>
                    </el-row>
                </div>

                <div v-if="computeType==2" >
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">定期存入：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute2.principal" size="mini" style="width: 190px"></el-input></el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">存入期数：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute2.times" size="mini" style="width: 190px"></el-input></el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="1">&nbsp;</el-col>
                        <el-col :span="6" style="padding-top: 5px;color: black">每期利息：</el-col>
                        <el-col :span="17"><el-input type='number' v-model="compute2.interest" size="mini" style="width: 90%"></el-input>%</el-col>
                    </el-row>

                    <div style="margin-top: 10px;width: 100%;text-align: center" >
                        <el-button type="info" round size="mini" @click="compute()">计算</el-button>
                    </div>

                    <div style="margin-top: 30px;text-align: center;">本利结果</div>

                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">本金和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute2.principalSum}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">利息和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute2.interestSum}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="8">&nbsp;</el-col>
                        <el-col :span="6" style="color: black">本息和：</el-col>
                        <el-col :span="10" style="padding-top: 3px">{{compute2.totalSum}}</el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            options:[
                {
                    value:1,
                    label:"一次存钱，到期整取"
                },
                {
                    value:2,
                    label:"定期存钱，到期整取"
                },
            ],
            computeType:1,
            test:1010,
            compute1:{
                principal:0,
                interest:0,
                times:0,
                principalSum:0,
                interestSum:0,
                totalSum:0
            },
            compute2:{
                principal:0,
                interest:0,
                times:0,
                principalSum:0,
                interestSum:0,
                totalSum:0
            }
        },
        methods:{
            compute(){
                if(this.computeType==1){
                    this.compute1.principal=parseFloat(this.compute1.principal)
                    this.compute1.interest=parseFloat(this.compute1.interest)
                    this.compute1.times=parseInt(this.compute1.times)

                    this.compute1.interestSum=this.compute1.principal*Math.pow(1+(this.compute1.interest/100),this.compute1.times)-this.compute1.principal
                    this.compute1.principalSum=this.compute1.principal
                    this.compute1.totalSum=this.compute1.principalSum+this.compute1.interestSum

                    this.compute1.principalSum=this.compute1.principalSum.toFixed(2);
                    this.compute1.interestSum=this.compute1.interestSum.toFixed(2);
                    this.compute1.totalSum=this.compute1.totalSum.toFixed(2);
                }else if(this.computeType==2){
                    let compute=this.compute2

                    compute.principal=parseFloat(compute.principal)
                    compute.interest=parseFloat(compute.interest)
                    compute.times=parseInt(compute.times)

                    for(let i=compute.times; i>0; i--){
                        compute.totalSum=compute.totalSum+this.computeCompoundInterest(compute.principal,compute.interest/100,i);
                    }
                    compute.principalSum=compute.times*compute.principal
                    compute.interestSum=compute.totalSum-compute.principalSum

                    compute.principalSum=compute.principalSum.toFixed(2);
                    compute.interestSum=compute.interestSum.toFixed(2);
                    compute.totalSum=compute.totalSum.toFixed(2);
                }
            },
            computeCompoundInterest(principal,interest,times){
                return principal*Math.pow(1+interest,times)
            }
        }
    })
</script>
</body>
</html>